import React from 'react';
import _ from 'lodash';
import classNames from 'classnames';

import './navlink.css';

export interface INavLinkProps {
    /**
     * 目标地址，应当是绝对路径。
     */
    href: string,
    /**
     * 是否显示为可用链接。
     */
    active: boolean,
}

/**
 * 导航链接。
 */
export class NavLink extends React.Component<INavLinkProps> {
    constructor(props: INavLinkProps) {
        super(props);
    }

    static defaultProps: INavLinkProps = {
        href: '',
        active: false,
    }

    shouldComponentUpdate = (nextProps: INavLinkProps): boolean => 
        nextProps.href !== this.props.href || nextProps.active !== this.props.active;

    render = (): JSX.Element => {
        return <div className={classNames('ui item', { active: this.props.active })}>
            <a href={this.props.href} aria-current={!this.props.active} >{this.props.children}</a>
        </div>;
    }
};